<template>
  <div class="common-container">
    <div class="right">
      <div class="right-define">
        <div class="mountPoints_info" style="position: relative">
          <div class="mountPoints_info_title">
            <span class="title">安装点信息</span>
            <div>
            <el-button size="small" style="margin-left: 15px" @click="editTarget" class="el_button">接警人</el-button>
            <el-button size="small" style="margin-left: 15px" @click="edit" class="el_button">修改</el-button>
          </div>
          </div>
          <div class="define">
            <div class="define_header">
              <div class="header_common">
                <span class="son_title">安装点</span>
                <span class="son_title" style="font-size: 1vw;margin-top: 8px;">{{ result.name }}</span>
              </div>
              <div class="header_common">
                <span class="son_title">所属楼层</span>
                <span class="son_title" style="font-size: 1vw;">{{ result.floorName }}</span>
              </div>
              <div class="header_common">
                <span class="son_title">所属建筑</span>
                <span class="son_title" style="font-size: 1vw;">{{ result.buildingName }}</span>
              </div>
              <div class="header_common">
                <span class="son_title">联网单位</span>
                <span class="son_title" style="font-size: 1vw;">{{ result.orgName }}</span>
              </div>
              <div class="header_common">
                <span class="son_title">创建时间</span>
                <span class="son_title" style="font-size: 1vw;margin-top: 9px;">{{ result.createTime }}</span>
              </div>
            </div>
            <!-- <div class="define_footer"> -->
              <!-- <div class="header_common">
                <span class="son_title">地址</span>
                <span class="son_title">{{result.address}}</span>
              </div> -->
              <!-- <div class="header_common">
                <span class="son_title">创建时间</span>
                <span class="son_title">{{ result.createTime }}</span>
              </div> -->
              <!-- <div class="header_common">
                <span class="son_title">接警人</span>
                <span class="son_div">
                  <span v-for="(item, i) in arr" :key="i">{{ i + 1 }}、{{ item.name }}<span>：</span>{{ item.mobile
                  }}<span v-if="arr.length > i + 1"></span></span>
                </span>
              </div> -->
              <!-- <div class="header_common">
                <span class="son_title">接警人</span>
                <span class="son_title">{{arr.length>0?arr[0].mobile:''}}，{{arr.length>0?arr[0].mobile:''}}，{{arr.length>0?arr[0].mobile:''}}，{{arr.length>0?arr[0].mobile:''}}，{{arr.length>0?arr[0].mobile:''}}</span>
              </div> -->
              <!-- (1级) -->
              <!-- <div class="header_common">
              </div>
               <div class="header_common">
              </div> -->
            <!-- </div> -->

            <!-- <div class="define_header">
             <div class="header_common">
                  <span class="son_title">接警人</span>
                <span class="son_title">{{arr.length>0?arr[0].mobile:''}}</span>
              </div>
              <div class="header_common">
                  <span class="son_title">接警人</span>
                <span class="son_title">{{arr.length>0?arr[0].mobile:''}}</span>
              </div>
              <div class="header_common">
              </div>
              <div class="header_common">
              </div>
            </div> -->
          </div>
        </div>
        <div class="mountPoints_pics">
          <span class="title">现场图片</span>
          <!-- <el-carousel :interval="4000" type="card"> -->
          <el-carousel type="card" v-if="picList.length!=0">
            <el-carousel-item v-for="(item, i) in picList" :key="i">
              <el-image :src="item" style="width: 100%; height: 100%" :preview-src-list="picList"></el-image>
            </el-carousel-item>
          </el-carousel>
          <div style="width: 100%;height: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center;" v-else>
            <el-image :src="meinvArr2" style="width: 35%;" ></el-image>
            <div style="font-size: 14px;margin-top: 15px;">暂无图片</div>
          </div>
        </div>
      </div>

      <div class="div_box_content">
      <!-- 设备 -->
      <div class="right-header">
        <div class="right-header_left">
          <span class="title">关联设备</span>
          <!-- <el-input v-model="search_val" placeholder="请输入用户名" size="small" style="width: 300px;"></el-input>
          <el-button size="small" style="margin-left: 15px;">查询</el-button> -->
        </div>
        <div class="right-header_right">
          <el-button size="small" style="margin-left: 15px" icon="el-icon-plus" @click="onAdd2" class="el_button">绑定</el-button>
          <el-button size="small" style="margin-left: 15px" icon="el-icon-plus" @click="deviceGroupAdd" v-if="result.orgId=='1647804069506142210'" class="el_button">设备组</el-button>
          <!-- <el-dropdown @command="onDropdown">
            <el-button size="small" style="margin-left: 15px;">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="batch">批量操作</el-dropdown-item>
              <el-dropdown-item command="set">一键布防</el-dropdown-item>
              <el-dropdown-item command="remove">一键撤防</el-dropdown-item>
              <el-dropdown-item command="alarmReceiver">设置接警人管理</el-dropdown-item>
              <el-dropdown-item command="del">批量删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
      </div>
      <div class="right-bottom">
        <el-table :data="tableData" height="calc(100% - 65px)" class="table" @selection-change="batchSelect"
          :header-cell-style="headerStyle" row-key="id">
          <!-- <el-table-column align="center" type="selection" :reserve-selection="true" min-width="40">
          </el-table-column> -->
          <el-table-column align="center" label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column align="center" prop="imei" label="设备编码" min-width="140" >
          </el-table-column>
         
          <el-table-column align="center" prop="online" label="位置标记" >
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.mark !=''" style="color: #28c76f;cursor: pointer;" @click="updateMark(scope.row)"></i>
            <i class="el-icon-error" v-else style="color: #F84242;cursor: pointer;" @click="updateMark(scope.row)"></i>
          </template>
        </el-table-column>

          <el-table-column align="center" prop="classMark" label="产品型号" >
          </el-table-column>
          <el-table-column align="center" prop="" label="设备状态" >
            <template slot-scope="{ row }">
              <span v-if="row.deviceType == 'Camera'">-</span>
              <el-tag type="success" size="mini" v-else-if="row.online === 1">在线</el-tag>
              <el-tag type="danger" size="mini" v-else>离线</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="name" label="产品类型"  show-overflow-tooltip>
          </el-table-column>

          <el-table-column align="center" prop="mobile" label="安装人员手机号"  show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="installTime" label="安装时间" >
          </el-table-column>

          <el-table-column align="center" prop="management" label="操作" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="详情" placement="bottom"
              v-if="scope.row.deviceType === 'Camera'||scope.row.deviceType === 'DoorMagnetism' || scope.row.deviceType === 'Infrared'|| scope.row.deviceType === 'GasSensor' || scope.row.deviceType === 'SmokeAlarm'|| scope.row.deviceType === 'FireHydrant'" >
                <i @click="onEdit(scope.row)" class="el-icon-tickets tableBtnIcon"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="拆除" placement="bottom">
                <i @click="onDel(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getByTargetId" class="pagination">
        </pagination> -->
      </div>
    </div>
    </div>

    <addModel ref="refAdd" :result="result"></addModel>
    <addDevice ref="refAddDevice" :result="result"></addDevice>
    <deviceGroup ref="refDeviceGroup" :result="result" :tableData="tableData"></deviceGroup>
    <editModel ref="refEdit" :getLocationInfo="getLocationInfo" :picList2="picList" @getedit="getedit" :result="result"
      :arr="arr"></editModel>
    <batchModel ref="refBatch"></batchModel>
    <alarmReceiver ref="refAlarmReceiver"></alarmReceiver>
    <door-log ref="refDoorLog" :deviceInfo="deviceInfo"></door-log>
    <particulars ref="refparticulars" :deviceInfo="deviceInfo"></particulars>
    <Ichnography ref="refIchnography" :editInfo="editInfo"></Ichnography>
    <editTarget ref="refeditTarget"></editTarget>

  </div>
</template>

<script>
import addModel from "./components/addModel.vue";
import addDevice from "./components/addDevice.vue";
import deviceGroup from "./components/deviceGroup.vue";
import editModel from "./components/editModel.vue";
import DoorLog from "./components/DoorLog.vue";
import batchModel from "./components/batchModel.vue";
import alarmReceiver from "./components/alarmReceiver.vue";
import Tree from "./components/tree";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import {
  reqGetByTargetId,
  reqDeviceBySpaceId,
  reqAlarmReceiverEdit,
  reqDeviceUnBind,
  reqSpaceReceiverBatchDel,
  reqGetPicBySpaceId,
  reqFloorById,
  reqProductList
} from "@/api/api";
import { mapState } from "vuex";
import particulars from '@components/DeviceInfo/particulars.vue'//设备详情组件
import Ichnography from "./components/Ichnography.vue"
import editTarget from "./components/editTarget.vue"

export default {
  name: "",
  components: {
    Tree,
    Pagination,
    addModel,
    editModel,
    batchModel,
    alarmReceiver,
    addDevice,
    DoorLog,
    deviceGroup,
    particulars,
    Ichnography,
    editTarget
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      search_val: "",
      page: 1,
      limit: 20,
      total: 100,
      tableData: [],
      getLocationInfo: {
        // getLat: "",
        // getLng: "",
        // getAdd: "",
        // province: "",
        // city: "",
        // area: "",
        // provinceCityAreaValue: "",
      },
      picList: [], //照片
      batchDate: [],
      meinvArr2:require("@assets/images/Group1527.png"),
      meinvArr: [
        require("@assets/images/meinv1.jpg"),
        require("@assets/images/meinv2.jpg"),
        require("@assets/images/meinv3.jpg"),
        require("@assets/images/meinv4.jpg"),
        require("@assets/images/meinv5.jpg"),
      ],
      result: {},
      arr: [{ mobile: "" }],
      deviceInfo: {}, //设备一条信息
      editInfo:{},
      ProductList:[]
    };
  },
  mounted() {
    // this.addListenAddress();
  },
  computed: {
    ...mapState(["spacesManage","user"]),
  },
  methods: {
     // 修改标记点
     async updateMark(e){
      // console.log(e);
      this.editInfo = JSON.parse(JSON.stringify(e));
      // 获取平面图 图片
      const res=await reqFloorById(e.spaceId);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if(res.data.rows.image=='') return this.$modal.notifyWarning('当前楼层暂无平面图,请上传后操作!');
      this.$refs.refIchnography.getimage(res.data.rows.image)
      this.$refs.refIchnography.dialogVisible=true;
      if(e.mark!=''){
        this.$refs.refIchnography.getMark(e.mark)
      }
    },
    // 修改后更新安装点信息
    getedit(e) {
      // console.log(e);
      this.result = e;
    },
    // 设置接警人
    editTarget(){
      this.$refs.refeditTarget.dialogVisible = true;
      this.$refs.refeditTarget.getDataList(this.result) // 获取接警人列表
      // this.$refs.refeditTarget.getByTargetId(this.result.id)// 空间id获取接警人列表
    },
    // 修改安装点信息
    async edit() {
      await this.$refs.refEdit.getDataList();
      this.getLocationInfo = JSON.parse(JSON.stringify(this.result));
      this.$refs.refEdit.dialogVisible = true;
    },
    // 请求编辑通知方式
    async reqEditFun(params) {
      const res = await reqAlarmReceiverEdit(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("修改成功");
    },
    handleSizeChange() { },
    handleCurrentChange() { },
    // 选择复选框批量添加联系人
    batchSelect(arr) {
      this.batchDate = [];
      arr.forEach((c) => {
        this.batchDate.push(c.id);
      });
      // console.log(this.batchDate, "this.batchDate");
    },
    // 新增
    onAdd() {
      this.$refs.refAdd.dialogVisible = true;
      this.$refs.refAdd.getDataList();
    },
    onAdd2() {
      this.$refs.refAddDevice.dialogVisible = true;
    },
    deviceGroupAdd(){
      this.$refs.refDeviceGroup.dialogVisible = true;
      this.$refs.refDeviceGroup.GetBySpaceId()
    },
    onEdit(row) {
      // console.log(row)
      // this.$refs.refDoorLog.dialogVisible = true;
      // this.deviceInfo = JSON.parse(JSON.stringify(row));
      // if(row.deviceMac=='' && row.deviceType=="Camera") return this.$modal.notifyWarning('设备MAC地址为空');
      // if (row.deviceMac == "" && row.deviceType == "Camera"&&row.manufacturerId!='1660554046491635714')
      //   return this.$modal.notifyWarning("设备MAC地址为空");
      this.$refs.refparticulars.dialogVisible = true;
      row.spaceName=this.result.buildingName+'-'+this.result.floorName+'-'+this.result.name;//安装点名称
      this.deviceInfo = JSON.parse(JSON.stringify(row));
    },
    // 解绑设备
    onDel(id) {
      this.$confirm("是否确定要拆除此设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqDeviceUnBind({ id,
            userId: this.user.userId, });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("拆除成功");
          this.DeviceBySpaceId();
        })
        .catch(() => { });
    },
    // 删除接警人
    onDeldet(id) {
      this.$confirm("是否确定要删除接警人?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqSpaceReceiverBatchDel({
            idList: [id],
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("删除接警人成功");
          this.getByTargetId();
        })
        .catch(() => { });
    },
    // 空间id获取接警人列表
    // async getByTargetId() {
    //   let res = await reqGetByTargetId(this.result.id);
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   this.arr = res.data.rows;
    // },
    // 空间id获取安装设备
    async DeviceBySpaceId() {
      let res = await reqDeviceBySpaceId(this.result.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      this.tableData = res.data.rows;
      this.tableData.forEach(item=>{
        this.ProductList.forEach(item2=>{
          if(item.deviceType==item2.deviceType){
            item.name=item2.name;//产品名称
          }
        })
      })
    },
     // 产品列表
     async Product() {
         let res = await reqProductList();
         if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
         this.ProductList = res.data.rows;
      },
    // 空间id获取安装点照片
    async GetPicBySpaceId() {
      let res = await reqGetPicBySpaceId(this.result.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      this.picList = res.data.rows;
    },
  },
  async created() {
    this.result = this.spacesManage.spInfo;
    // console.log(this.result);
    // this.getByTargetId();// 空间id获取接警人列表
    await this.Product()//产品列表
    await this.DeviceBySpaceId();// 空间id获取安装设备
    this.GetPicBySpaceId();// 空间id获取安装点照片
  },
  async activated() {
    this.result = this.spacesManage.spInfo;
    // console.log(this.result);
    // this.getByTargetId();// 空间id获取接警人列表
    await this.Product()//产品列表
    await this.DeviceBySpaceId();// 空间id获取安装设备
    this.GetPicBySpaceId();// 空间id获取安装点照片
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
.common-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  // border: 1px solid @primaryBorderColor;
  border-radius: 6px;
  box-shadow: none;

  .left {
    width: 264px;
    height: 100%;
    background: @primaryHeaderBgcolor;
    border-radius: 6px 0 0 6px;
    border-right: 1px solid @primaryBorderColor;
  }

  .right {
    // width: calc(100% - 264px);
    width: 100%;
    left: 264px;
    height: 100%;
    border-radius: 6px;
    // background: @primaryHeaderBgcolor;

    .table {
      background: @primaryHeaderBgcolor;
    }

    .right-define {
      border-radius: 6px;
      // background: @primaryHeaderBgcolor;
      height: 33%;
      // min-height: 169px;
      width: 100%;
      margin-bottom: 20px;
      color: @primaryThemeTxtColor;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
      }

      .mountPoints_info {
        position: relative;
        box-sizing: border-box;
        padding: 10px 20px;
        // flex: 2;
        border-radius: 6px;
        width: 62.7%;
        background: @primaryHeaderBgcolor;
        // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
        box-shadow: @boxShadow;

        .mountPoints_info_title {
          padding: 5px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .define {
          display: flex;
          flex-direction: column;
          height: calc(100% - 36px);
          justify-content: space-around;
          // margin-top: 10px;

          .header_common {
            display: flex;
            flex-direction: column;
            // justify-content: space-around;
            flex: 1;

            >span:last-of-type {
              margin-top: 6px;
            }
          }

          .son_title {
            font-size: 14px;
          }
          .son_div{
            display: flex;
            flex-wrap: wrap;
            width: 90%;
            line-height: 27px;
            >span{
              width: 33.33%;
              font-size: 1vw;

            }
          }

          .define_header {
            display: flex;
            justify-content: space-between;
            flex: 1;
            margin-top: 25px;
          }

          .define_footer {
            display: flex;
            // justify-content: space-between;
            flex: 1;

            >.header_common:first-of-type {
              flex: 1;
            }

            >.header_common:last-of-type {
              flex: 3;
            }
          }
        }
      }

      .mountPoints_pics {
        background: @primaryHeaderBgcolor;
        // flex: 1;
        width: 36%;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 10px 20px;
        // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
        box-shadow: @boxShadow;
      }
    }

    .right-header {
      box-sizing: border-box;
      padding: 0 12px;
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: @primaryHeaderBgcolor;
      border-radius: 6px 6px 0 0;
      // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";

      .right-header_left {
        min-width: 500px;

        .title {
          font-size: 18px;
          font-weight: 600;
          color: @primaryThemeTxtColor;
          margin-left: 10px;
        }
      }

      .right-header_right {
        width: 300px;
        display: flex;
        justify-content: flex-end;
        min-width: 300px;
      }
    }

    .right-bottom {
      // height: calc(100% - 65px);
      // height: 50vh;
      height: calc(100% - 6.5vh);
      // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
    }

    .table {
      width: 100%;
      height: 100% !important;
      // height: calc(100% - 26px) !important;
      // min-height: calc(100% - 65px);
    }
  }
}

::v-deep .el-table tr {
  background-color: @primaryHeaderBgcolor;
  color: @primaryThemeTxtColor;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid @primaryBorderColor;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: @primaryBorderColor;
  z-index: 1;
}

::v-deep .el-table tbody tr:hover>td {
  background: @primaryMenuItem !important;
}

::v-deep .el-button--medium {
  background: #7367f0;
  color: #fff;
  border: none;
}

.mapLoc {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;

  .iframe {
    width: 100%;
    height: 100%;
  }
}

// 省市区
::v-deep .distpicker-address-wrapper select {
  // padding: 0.2rem 1.75rem;
  height: 35px;
  font-size: -1rem;
  font-size: 14px;
  line-height: 1.25;
  width: 360px;
  margin-bottom: 10px;
  background-color: @primaryHeaderBgcolor !important;
  border: 1px solid @primaryBorderColor;
  color: @primaryContentTxt !important;
}

// dialog 框
::v-deep .el-dialog {
  background: transparent;
}

::v-deep .el-dialog__header {
  background: @primaryBgcolor;
  border-radius: 6px 6px 0 0;
}

::v-deep .el-input__inner {
  background: @primaryHeaderBgcolor !important;
  border: 1px solid @primaryBorderColor;
  color: @primaryContentTxt !important;
}

::v-deep .el-dialog__footer {
  background: @primaryHeaderBgcolor !important;
  border-radius: 0 0 6px 6px;
}

::v-deep .el-dialog__title {
  color: @primaryThemeTxtColor2 !important;
}

::v-deep .el-dialog__close {
  color: @primaryContentTxt !important;
}

::v-deep .el-textarea__inner {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt !important;
}

::v-deep .el-dialog__body {
  background: @primaryHeaderBgcolor !important;
}

::v-deep .el-form-item__label {
  color: @primaryThemeTxtColor2 !important;
}

::v-deep .el-textarea__inner {
  border: 1px solid @primaryBorderColor;
}

// 表格按钮
.tableBtnIcon {
  font-size: 18px;
  cursor: pointer;
}

::v-deep .el-table .cell.el-tooltip {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

::v-deep .el-carousel__container {
  // height: 114px !important;
  height: 16vh !important;
}

::v-deep .el-carousel__item h3 {
  line-height: 114px;
}

// 分页器
.pagination {
  ::v-deep .el-pager {
    border-radius: 30px;
    background: @paginationBgcolor;
    margin: 0 5px;
    height: 32px;
  }

  ::v-deep .el-pager li {
    min-width: 32px !important;
    background: @paginationBgcolor;
    color: #b4b7bd;
    height: 32px;
    line-height: 32px;
  }

  ::v-deep .el-pager li.active {
    color: #fff;
    border-radius: 30px;
    background: #7367f0 !important;
  }

  ::v-deep .el-pager li:first-child {
    border-radius: 30px;
  }

  ::v-deep .el-pager li:last-child {
    border-radius: 30px;
  }
}

// 通知方式文字
::v-deep .el-switch__label--left {
  color: @primaryTxtcolor;
  margin-left: 20px;
}
.div_box_content{
  box-shadow: @boxShadow;
  // height: calc(100% - 290px)!important;
  height: calc(100% - 32vh)!important;
}

.el_button{
  background: #7367f0;
    color: #fff;
    border: none;
}
</style>
